<template>
    <div id='exam'> 
        <div id="content" class="div_content"> This is the div content.<a href="#" onclick="box('hide');">Close</a>. </div>
            <div id="full" class="block_overlay"></div>
            <form id="testForm" name="testForm" action="" method="post">
              <!-- <input id="currentno" type="hidden" name="currentno" value="1">
              <input id="zkzh" type="hidden" name="zkzh" value="10800010078">
              <input id="staffId" type="hidden" name="staffId" value="193">
              <input id="subjectCode" type="hidden" name="subjectCode" value="3">
              <input id="paperCode" type="hidden" name="paperCode" value="2C1"> -->
              <div id="layout">
                 <div>
                   <div class="top_bar" id="top_ico">
                     <!--<input name="隐藏" type="button" onClick="toggle_tp('header_hidden')">--> 
                     </div>
                   <div id="header_hidden">
                     <!--<input name="显示" type="button" onClick="togg_tp('header')"-->
                     &gt;</div>
                 </div>
                <div id="header" style='-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;'>    
                  <div class="infoNav_2">
                    <ul>
                      <li><img src="http://60.208.22.53:7080/test2018zj/test/images/blue.jpg" width="86" height="98"></li>
                      <li>&nbsp;<br>&nbsp;</li>
                       <li>          
                                     姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名<br>
                                     性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别<br>
                                     准考证号<br>
                                     证件号码          
                      </li>
                      <li>
                             ：XX<br>
                             ：男<br>
                             ：11111111111<br>
                             ：111111111111111111
                      </li>
                      <li>&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</li>
                      <li><br></li>
                    </ul>        
                  </div>
                  <div style=" float:right; width:340px; margin-right:30px;">      
                   <div style=" float:left;margin-top:34px;font-size: 16px;font-weight: bolder;color: #ffff00;">考试剩余时间：<span id="clock">{{timer}}</span></div>
                   <div style="float:left; margin-top:29px;margin-left:5px;"><input class="submitbutton" name="交卷" type="button" value="交 卷" onclick="submitPaper()"></div>
                   <div style="display:none">
                          <input id="startB" type="button" value="start countdown!" onclick="run()" disabled="">
                          <input id="endB" type="button" value="stop countdown!" onclick="stop()">
                          <input id="diff" type="hidden" value="328000-328001=-1">
                          <input id="next" type="hidden">
                        </div>
                  </div>
                  <div style="margin-top:22px;font-weight: bolder;font-size:16px;">2019年度全国会计专业技术中级资格无纸化考试<br>中级会计实务</div>
                </div>
                <div id="main">
                  <div id="leftside"  v-if='showleft' :style='{width:leftsidemainWidth}'> 
                    <div id="leftsidemain" :style='{width:leftWidth}'>
                      <div class="tbox">
                        <div id="tab-content0" class="block">
                          <div id="mainsub0">
                            <li class="submenu" v-for='(item,index) in list' :key='index'>
                              <a :class="showsubs[index]?'subShow':'subHide'" @click='showSub(index)' href="javascript:void(0)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.title}}</a>
                              <ul :class="showsubs[index]?'myShow':'myHide'"
                              id="sub">
                                <li>
                                  <a id="" v-for='(val,num) in item.data' :key='num' href="javascript:void(0)" @click='clickA(item.type,num)'>{{num + 1}}&nbsp;<span id="" style="color: red">*</span></a>
                                </li>
                              </ul>
                             </li>
                          </div>
                        </div>
                      </div>
                      <div class="submark"> 说明：<br>
                        1.题号右方的“*”符号代表该小题尚未作答。<br>
                        2.题号右方的“?”符号代表该小题做过标记。<br>
                        3.考生作答的同时会自动保存答案。</div>
                      <div class="subcal">
                        <!-- 
                        <input name="计算器" value="" type="button" onclick="useCalculator()">
                        -->
                        <input name="计算器" value="" type="button" @click="showCal">
                      </div>
                    </div>
                    <div class="middlebar">
                      <input name="隐藏" type="button" @click="toggle">
                    </div>
                  </div>
                  <div id="leftside_hiddens" v-if='!showleft'>
                    <input name="显示"  type="button" @click="toggle">
                  </div>
                  <div id="container">
                    <div>
                      <!-- <iframe id="testFrame" width="100%" name="test" frameborder="0" src="C:\Users\Administrator\Desktop\中级会计考试\html/panduan.html"  :height="iframeHeight">
                      </iframe> -->
                      <div class='testBox' :style="{width:'100%',height:iframeHeight+'px'}">
                        <Question1 v-if="type == 'danxuan'" :type='type' :testNum ='testNum'></Question1>
                        <Question2 v-else :type='type' :testNum ='testNum' :questionHeight='iframeHeight'></Question2>
                      </div>
                      <div class="updown" style='text-align: left;'>
                        <input name="tagTest" id="tagTest" type="checkbox">
                        标记&nbsp;
                        <input class="button_updown" id="lastButton" name="上一题" value="上一题" type="button" disabled="true">
                        &nbsp;
                        <input class="button_updown" id="nextButton" name="下一题" value="下一题" type="button" >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              </form>
    </div>
</template>

<script>
import Question2 from '../components/question2.vue';
import Question1 from '../components/question1.vue';
export default {
    name:'exam',
    components:{
      Question2,
      Question1
    },
    data(){
      return{
        finish : "00:00:00",
        timer : '02:59:59',
        time:'',
        list:[
          {title:'单项选择题',data:3,type:'danxuan'},
          {title:'多项选择题',data:3,type:'danxuan'},
          {title:'判断题',data:3,type:'danxuan'},
          {title:'计算分析题',data:1,type:'zonghe'},
          {title:'综合题',data:1,type:'zonghe'}
        ],
        showsubs:[true,true,true,true,true],
        showleft:true,
        // iframeHeight:,
        iframeHeight:window.screen.availHeight*0.9-40,
        leftWidth:window.screen.availWidth*0.2+'px',
        leftsidemainWidth:null,
        maxW:window.screen.availWidth*0.2,
        testNum:0,
        type:'danxuan'
      }
    },
    methods:{
      //计算器
      showCal(){
        try {
          var objShell = new ActiveXObject("wscript.shell");
          objShell.Run("calc");
          objShell = null;
        }
        catch (e){
          alert('不能正确打开计算器，请自行启动系统计算器')
        }
      },
      //收起展开题号栏
      showSub(index){
        let i = !this.showsubs[index]
        this.showsubs.splice(index,1,i)
      },
      //是否显示左侧
      toggle(){
        this.showleft = !this.showleft;
      },
      //倒计时
        onTimer(){
            var hms = this.timer.split(':');
            var s = new Number(hms[2]);
		        var m = new Number(hms[1]);
            var h = new Number(hms[0]);
            s -= 1;
            if (s < 0) {
              s = 59;
              m -= 1;
            }
            if (m < 0) {
              m = 59;
              h -= 1;
            }
            var ss = s < 10 ? ("0" + s) : s;
            var sm = m < 10 ? ("0" + m) : m;
            var sh = h < 10 ? ("0" + h) : h;
            this.timer = sh + ":" + sm + ":" + ss;
        },
        clickA(type,num){
          this.type = type;
          this.testNum = num;
        }
    },
    beforeDestroy(){
        clearInterval(this.time);
        // window.onbeforeunload = null;
    },
    mounted(){
      //刷新提示
      //  window.onbeforeunload = function (e) {
      //     e = e || window.event;
      //     if (e) {
      //     e.returnValue = '关闭提示';
      //     }
      //     return '关闭提示';
      // }
      //让右侧的高度随着屏幕变化而变化
      let that = this;
      that.maxW = window.screen.availWidth*0.2;
      that.leftsidemainWidth = that.maxW+15;
      that.leftsidemainWidth = that.leftsidemainWidth + 'px';
      window.onresize = () => {
        return (() =>{
            that.iframeHeight = window.screen.availHeight*0.9-40;
            that.leftWidth = that.maxW+"px";
            that.leftsidemainWidth = that.maxW+15;
            that.leftsidemainWidth = that.leftsidemainWidth + 'px';
        })()
      }
      //倒计时
      this.time = setInterval(()=>{
        this.onTimer();
        if(this.timer == this.finish){
            clearInterval(this.time)
        }
      },1000)
    },
    watch:{
      iframeHeight(val){
        this.iframeHeight = val
      },
      maxW(val){
        this.maxW = val;
        this.leftWidth = that.maxW+"px";
        this.leftsidemainWidth = this.maxW+15;
        this.leftsidemainWidth = this.leftsidemainWidth + 'px';
      }
    }
}
</script>

<style lang="less" scoped>
@import url('../assets/css/style_2.css');
.testBox{
  overflow: hidden;
}
#leftside{
   -webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none;
}
</style>
